<template>
  <el-descriptions ref="ruleFormRef" :column="2" direction="vertical" v-loading="isLoading">
    <el-descriptions-item width="50%" :label="titles.unityName">
      {{ isNullOrEmpty( operate.unityName ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label="titles.projectName">
      {{ isNullOrEmpty( operate.projectName ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label="titles.planName">
      {{ isNullOrEmpty( formInline?.planName ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label="titles.beginDate">
      {{ isNullOrEmpty( formInline?.beginDate ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label="titles.endDate">
      {{ isNullOrEmpty( formInline?.endDate ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label="titles.cycleValue">
      {{ isNullOrEmpty( formInline?.cycleValue ) }}{{ isNullOrEmpty( PERIODUNITTEXT[formInline?.cycleUnit]?.label ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" :label="titles.inspectionUser">
      <span class="mr-[5px]" v-for="(item, index) in formInline.inspectionUser" :key="index">
        {{ isNullOrEmpty( item.nickname ) }}
      </span>
    </el-descriptions-item>
    <el-descriptions-item width="50%" label="通知时间">
      {{ isNullOrEmpty( formInline?.noticeStart )}}- {{  isNullOrEmpty(formInline?.noticeEnd ) }}
    </el-descriptions-item>
    <el-descriptions-item width="50%" label="通知方式">
      <span class="mr-[10px]" v-for="(item, index) in formInline.noticeType" :key="index">
        {{ isNullOrEmpty( WORKORDER_NOTICE_TYPETEXT[item]?.label ) }}
      </span>
      <span v-if="!formInline.noticeType">--</span>
    </el-descriptions-item>
    <el-descriptions-item width="50%" label="完成后通知">
      <span class="mr-[10px]" v-for="(item, index) in formInline.finishNotice" :key="index">
       {{ isNullOrEmpty( item.nickname ) }}
      </span>
    </el-descriptions-item>
    <!-- <el-descriptions-item width="50%" label="设施分组">
      <span class="mr-[10px]" v-for="(item, index) in formInline.groupNames" :key="index">
        {{ isNullOrEmpty( item ) }}
      </span>
    </el-descriptions-item> -->

  </el-descriptions>
  <el-form label-position="top">
    <el-form-item label="未完成通知" prop="">
      <el-table :data="formInline.failNotice" border style="width: 100%" footer-row-class-name="hide">
        <el-table-column prop="day" label="距离巡检周期最后时间" minWidth="220" show-overflow-tooltip>
          <template v-slot="{ row }">
            <div class="flex items-center">
              <div class="px-[5px]">{{ row.day }}天</div>
              <div class="px-[5px]">{{ row.hour}}时</div>
              <div class="px-[5px]">{{row.minute}}分</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="noticeUser" label="通知人" show-overflow-tooltip minWidth="180">
          <template v-slot="{ row }">
            <span class="mr-[10px]" v-for="item in row.noticeUser" :key="item">
              {{ isNullOrEmpty( item.nickname ) }}
            </span>
          </template>
        </el-table-column>
      </el-table>

    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import {
  usePageVariablesStoreHook,
} from "@/store/modules/pageVariables";
const operate = usePageVariablesStoreHook().getOperate();
import { PERIODUNITTEXT } from "@/constant/dayly-inspection";
import {
  WORKORDER_NOTICE_TYPETEXT
} from "@/constant/workorder-mangenment";
import { ref } from "vue";
import { titles } from "./index";
import type { infoType } from "@/api/operate/daily-inspection/Inspection-plan/index";
type FormProps = {
  formInline: infoType;
  isLoading: boolean;
};

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({}) as infoType,
  isLoading: false
});

const ruleFormRef = ref();
//  const newFormInline = ref(props.formInline as any);
//
//
//  watch(()=>props.formInline,()=>{
//  	newFormInline.value = props.formInline
//  },{
//  	deep:true,
//  	immediate:true
//  })

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
